<template>
	<view>
		<view class="empty"></view>

		<view class="user_address">
			<view class="address_box lineb flex_dq">
				<text>收货人</text>
				<input type="text" v-model.trim="name" placeholder="请填写收货人姓名" />
			</view>
			<view class="address_box lineb flex_dq">
				<text>手机号</text>
				<input type="number" v-model.trim="phone" placeholder="请填写收货人手机号" />
			</view>
			<view class="address_box lineb  flex_dq">
				<text>省市区</text>
				<view class="ssq flex_ld overflow1">
					<view class="xuanze flex_ld" @click="openAddress">
						<!-- <text class="active">{{full_location}}</text> -->
						<text :class="areaState?'active':'change_state'">{{full_location}}</text>
						<u-icon name="arrow-right" color="#666666" size="14"></u-icon>
					</view>
				</view>
			</view>
			<view class="address_box lineb flex_dq">
				<text>详细地址</text>
				<input type="text" v-model.trim="detailed" placeholder="街道、楼牌号等" />
			</view>
			<!-- <view class="address_box  flex_dq">
				<text>详细地址</text>
				<u--textarea v-model="textarea" placeholder="请输入内容"  count   ></u--textarea>
			</view> -->
		</view>
		<view class="user_detail">
			<view class="user_detail_l  flex_dq">
				<text>标签</text>
				<view class="labels flex_dq">
					<text :class="item.id ==lableId?'active1':''  " v-for="(item,index) in labelsList" :key="index"
						@click="changeLableId(item)">{{item.name}}</text>
				</view>
			</view>

		</view>

		<view class="btns flex_c" @click="submit"><text>保存</text></view>
		<atAddress ref="scroll" :switchArea='true' :level="3" :dynamics="true"  @change='chooseSuccess'></atAddress>
	</view>
</template>

<script>
	import {
		area,
		addaddress,
		addressdetail,
		editaddress
	} from "../../api/user.js";

	export default {
		data() {
			return {
				lableId: "1",
				phone: "",
				name: "",
				detailed: "",
				add: "",
				labelsList: [{
					id: 0,
					name: '家'
				}, {
					id: 1,
					name: '公司'
				}, {
					id: 2,
					name: '其他'
				}, ],
				arealist: [],
				fieldMapping: {
					text: 'name', // 将 name 映射到 label
					value: 'id',
					// 将 code 映射到 value
				},
				areaState: false, //是否选择地区
				province: "",
				city: "",
				county: "",
				street:"",
				Defaultid: "",
				full_location: "请选择",
				flag: false,
				state: "",
				
			}
		},
		onLoad(e) {
			if (e.state == "modify" && e.id) {
				this.state = e.state
				this.Defaultid = e.id
				this.flag = true
				this.getDefaultaddress()
			}
		
			// this.getarealist()
		},
		methods: {
			openAddress() {
				this.$refs.scroll.open()
			},
			//地址选择成功
			chooseSuccess(e) {
				console.log('所选择的地址信息:', e)
				console.log('长度:', e.value.length)
				// this.addressAll = ''
				this.areaState = true
				let value = e.value;
				this.province = e.value[0].id
				this.city = e.value[1].id
				this.county = e.value[2].id
				if(e.value.length >3){
					this.street = e.value[3].id
				}else{
					this.street = ''
				}
				this.full_location = value.map(item=>item.name).join(' ')
				console.log(this.full_location);
			},
			getDefaultaddress() {
				addressdetail({
					id: this.Defaultid
				}).then(res => {
					this.name = res.data.name
					this.phone = res.data.phone
					this.province = res.data.province
					this.city = res.data.city
					this.county = res.data.county
					this.street = res.data.street
					this.detailed = res.data.address
					this.full_location = res.data.full_location
					this.areaState = true
					console.log(this.full_location)
				})
			},
			submit() {
				if (this.state == "modify" && this.Defaultid) {
					// if(this.street == 0){
					// 	uni.$u.toast('收货信息地址不完整')
					// 	return 
					// }
					editaddress({
						id: this.Defaultid,
						name: this.name,
						phone: this.phone,
						province: this.province,
						city: this.city,
						county: this.county,
						street:this.street,
						address: this.detailed,
						tag: this.lableId,
					}).then(res => {
						if (res.code == 1) {
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						}
						uni.$u.toast(res.msg)
					})
				} else {
					addaddress({
						name: this.name,
						phone: this.phone,
						province: this.province,
						city: this.city,
						county: this.county,
						address: this.detailed,
						street:this.street,
						tag: this.lableId,
						is_default: 0
					}).then(res => {
						if (res.code == 1) {
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						}
						uni.$u.toast(res.msg)
					})
				}

			},
			onnodeclick(e) {
				console.log(e);
			},
			onpopupopened(e) {
				console.log('popupopened');
			},
			onpopupclosed(e) {
				console.log('popupclosed');
			},
			onchange(e) {
				console.log(e)
				this.province = e.detail.value[0].value
				this.city = e.detail.value[1].value
				this.county = e.detail.value[2].value
			},
			// getarealist(area_id) {
			// 	const data = {
			// 		area_id:area_id?area_id:0
			// 	}
			// 	area(data).then(res => {
			// 		this.arealist = res.data
			// 	})
			// },
			changeLableId(item) {
				this.lableId = item.id
			},


		}
	}
</script>
<style scoped>
	.user_address {
		width: 690rpx;
		margin: 0 auto;
		background: #fff;
		border-radius: 12rpx;
	}
.change_state {
		font-size: 32rpx;
		color: #c3bfbf;
	}
	.active {
		font-size: 32rpx;
		color: #333333 !important;
	}
	.address_box {
		width: 92%;
		margin: 0 auto;
		padding-top: 40rpx;
		padding-bottom: 20rpx;
	}

	.lineb {
		border-bottom: 1rpx solid #E5E5E5;
	}

	.address_box>text {
		width: 180rpx;
		font-size: 32rpx;
		color: #333333;
		padding: 10rpx 0;
	}

	.address_box>input {
		width: 510rpx;
		padding: 10rpx 0;
		color: #333333;
	}

	.ssq {
		width: 510rpx;
	}

	.user_detail {
		width: 690rpx;
		margin: 30rpx auto;
		background: #fff;
		border-radius: 12rpx;
	}

	.labels {
		flex: 1;
		/* background: pink; */
	}

	.labels>text {
		padding: 6rpx 24rpx;
		border-radius: 26rpx;
		border: 1rpx solid #CCCCCC;
		font-size: 26rpx;
		color: #3333333;
		margin-right: 16rpx;
	}

	.user_detail_l {
		width: 92%;
		margin: 0 auto;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.user_detail_l>text {
		width: 150rpx;
		font-size: 32rpx;
		color: #333333;
		padding: 10rpx 0;
	}

	.defaults {
		padding: 30rpx 32rpx;
	}

	.defaults_box>text {
		margin-top: 6rpx;
	}

	.active1 {
		background: #65A3FF !important;
		color: #ffffff !important;
		border: 1rpx solid #65A3FF !important;
	}

	.btns {
		width: 690rpx;
		margin: 50rpx auto 0;
	}

	.btns>text {
		text-align: center;
		width: 100%;
		background: linear-gradient( 90deg, #FA2222 2%, #FFC400 98%);
		color: #ffffff;
		font-size: 32rpx;
		padding: 20rpx 0;
		border-radius: 40rpx;
	}

	.delete {
		width: 690rpx;
		margin: 30rpx auto 0;
	}

	.delete>text {
		text-align: center;
		width: 100%;
		border: 1rpx solid #ff4040;
		color: #ff4040;
		font-size: 32rpx;
		padding: 20rpx 0;
		border-radius: 40rpx;
	}
.redColor{
	color: red;
}
	/deep/.u-textarea {
		background: none !important;
		border: 1rpx solid #3d3954 !important;
	}

	/deep/.u-textarea__count {
		background: none !important;
	}

	/deep/.input-value-border {
		border: none !important;
	}

	/deep/.placeholder {
		font-size: 30rpx;
	}

	/deep/.uni-data-tree {
		margin-left: -20rpx;
	}

	/deep/.selected-item {
		font-size: 30rpx;
	}
</style>